<template>
    <div class="law-page">
        <div class="desc">找法律 要案例 寻服务 来循轨合规</div>
        <div class="search">
            <span class="tag">司法案例库</span>
            <div class="search-panel">
                <div class="select" @click="handleSelectPanel">
                    <span>
                        {{ selectItems[selectIndex] }}
                    </span>
                    <span>
                        <svg t="1678241202979" class="icon" viewBox="0 0 1902 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2886" width="16" height="16">
                            <path
                                d="M155.204535 74.710455C126.615552 46.121472 80.483035 45.902117 51.719826 74.665326L51.719826 74.665326C23.155712 103.22944 23.012571 149.397723 51.378322 177.763474L827.770953 954.156105C884.758821 1011.143973 977.122889 1011.175424 1034.142208 954.156105L1810.534839 177.763474C1838.910318 149.387995 1838.956544 103.428535 1810.193335 74.665326L1810.193335 74.665326C1781.629294 46.101285 1735.477321 45.94176 1706.708626 74.710455L982.721463 798.697618C954.132553 827.286601 907.960393 827.466313 879.191698 798.697618L155.204535 74.710455 155.204535 74.710455Z"
                                fill="#000000" p-id="2887"></path>
                        </svg>
                    </span>
                </div>
                <input class="searchInput" maxlength="63" v-model="searchInput" @keyup.enter="searchFunc" type="text"
                    placeholder="输入搜索内容" />
                <div class="se-icon" @click="searchFunc">
                    <svg t="1678241459842" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3906" width="32" height="32">
                        <path
                            d="M955.069071 864.311021 740.015134 649.258107c-3.752464-3.751441-8.841366-5.860475-14.149255-5.860475-5.306866 0-10.395768 2.108011-14.149255 5.860475l-16.692171 16.692171-38.34226-38.34226c53.03796-59.810201 85.298711-138.442072 85.298711-224.478588 0-186.774871-151.952784-338.727655-338.727655-338.727655S64.527642 216.35456 64.527642 403.12943c0 186.775894 151.952784 338.728678 338.727655 338.728678 86.36909 0 165.276231-32.510438 225.170343-85.913718l38.303374 38.303374-17.34504 17.34504c-7.812943 7.813966-7.812943 20.48352 0 28.297486l215.051891 215.052914c3.753487 3.751441 8.841366 5.860475 14.149255 5.860475 5.306866 0 10.395768-2.108011 14.149255-5.860475l62.334697-62.334697C962.883037 884.794541 962.883037 872.124987 955.069071 864.311021zM104.546078 403.12943c0-164.709319 133.9999-298.709219 298.709219-298.709219s298.709219 133.9999 298.709219 298.709219S567.964616 701.839673 403.255297 701.839673 104.546078 567.838749 104.546078 403.12943zM878.585119 912.496463 691.829691 725.741036l34.036187-34.036187 186.755428 186.755428L878.585119 912.496463z"
                            fill="#272636" p-id="3907"></path>
                    </svg>
                </div>
            </div>
            <Transition>
                <div class="select-panel" v-if="isShow">
                    <div class="select-items">
                        <span v-for="item, index in selectItems" @click="changeSelect(index)">
                            {{ item }}
                        </span>
                    </div>
                </div>
            </Transition>
        </div>
        <div class="main">
            <div class="aside">
                <div class="title">
                    专题分类
                </div>
                <div class="types">
                    <div class="typeItem" v-for="item, index in TypeArr" :class="{ isActive: index == TypeIndex }"
                        @click="changeType(index)">
                        {{ item.module_name }}
                    </div>
                </div>
            </div>
            <div class="content">

                <div class="caseList">
                    <div v-if="caseList.length != 0">
                        <div class="caseItem" v-for="item, index in caseList">
                            <div class="case-title">
                                <div
                                    v-html="selectIndex === 0 ? index + 1 + '. ' + brightenKeyword(item.title, searchInput) : index + 1 + '. ' + item.title">
                                </div>
                            </div>
                            <div class="info">
                                <div v-html="selectIndex === 4 ? brightenKeyword(item.court, searchInput) : item.court">
                                </div>
                                <span class="line"></span>
                                <div
                                    v-html="selectIndex === 3 ? brightenKeyword(item.case_number, searchInput) : item.case_number">
                                </div>
                                <span class="line"></span>
                                <span>
                                    {{ item.publish_at }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="empty" v-else>
                        <Empty />
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { queryCases } from '../api/request'
import Empty from '../components/Empty.vue'
const isShow = ref(false)
const TypeArr = [
    { 'module_id': 4, 'module_name': '数据隐私' },
    { 'module_id': 1, 'module_name': '商业秘密' },
    { 'module_id': 2, 'module_name': '知识产权' },
    { 'module_id': 3, 'module_name': '反垄断' },
    { 'module_id': 5, 'module_name': '环境保护' },
    { 'module_id': 6, 'module_name': '其他专题' },]
const TypeIndex = ref(6)
const selectItems = ["标题", "全文", "案由", '案号', '法院', "当事人"]
const selectIndex = ref(0)
const searchInput = ref('')
const changeSelect = (index) => {
    selectIndex.value = index
    searchInput.value = ""
    handleSelectPanel()
}

//搜索高亮
function brightenKeyword(val, keyword) {
    if (keyword.length > 0) {
        let regex = new RegExp(keyword, "g");
        return val.replace(regex, '<span style="color: #2a82e4; font-weight: bold;">$&</span>');
    } else {
        return val;
    }
}


const searchFunc = () => {
    let module_id = TypeArr[TypeIndex.value].module_id
    if (selectIndex.value === 0) {
        //标题
        query(module_id, searchInput.value, "", "")
    } else if (selectIndex.value === 3) {
        //案号
        query(module_id, "", "", searchInput.value)
    } else if (selectIndex.value === 4) {
        //法院
        query(module_id, "", searchInput.value, "")
    } else {
        alert(`暂不支持${selectItems[selectIndex.value]}的高级查询`)
    }
}



const changeType = (index) => {
    TypeIndex.value = index
    let module_id
    if (index < TypeArr.length && index >= 0) {
        module_id = TypeArr[TypeIndex.value].module_id
    }else{
        module_id = index
    }
    searchInput.value = ""
    query(module_id, "", "", "")
}

const handleSelectPanel = () => {
    isShow.value = !isShow.value
}
const caseList = ref([])

const query = async (module, title, court, case_number) => {
    let res = await queryCases(title, module, court, case_number)
    caseList.value = res.data
}

onMounted(() => {
    changeType(7)
})
</script>
<style scoped>
/* 动画 */
.v-enter-active,
.v-leave-active {
    transition: opacity 0.3s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}


.law-page {
    width: 85%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    /* border: 1px black solid; */
}

.desc {
    text-align: center;
    font-size: 35px;
    font-weight: bolder;
    letter-spacing: 0px;
    font-family: "myFont";
    margin: 50px 0;
    text-shadow: 1px 1px #BAE6EF, 2px 2px #BAE6EF, 3px 3px #BAE6EF, 4px 4px #BAE6EF, 5px 5px #BAE6EF;
}

.tag {
    font-size: 30px;
    font-weight: bolder;
    font-family: "myFont";
    margin-right: 30px;
    width: 200px;
    text-shadow: -1px -1px #fff, 1px 1px #333;
}

.search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 900px;
    margin: 5px auto;
    position: relative;
}

.search-panel {
    width: 600px;
    border: 1px solid black;
    display: flex;
    height: 50px;
    align-items: center;
    border-radius: 50px;
    background: rgba(232, 231, 230, 0.6);
    box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
}

.searchInput {
    outline: none;
    border: none;
    height: 90%;
    width: 420px;
    background: none;
}

.select {
    font-family: "myFont";
    font-size: 16px;
    height: 100%;
    border-radius: 50px 0 0 50px;
    display: flex;
    align-items: center;
    width: 108px;
    justify-content: space-around;

}

.se-icon {
    width: 72px;
    height: 100%;
    border-radius: 0 50px 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.se-icon:hover {
    background-color: rgba(210, 226, 248, 1);
    cursor: pointer;
}

.select-panel {
    width: 600px;
    height: 60px;
    border: 1px solid black;
    position: absolute;
    top: 55px;
    left: 300px;
    border-radius: 60px;
    background-color: rgba(232, 231, 230, 0.6);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .6);
}

.select-items {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.select-items span {
    margin: 0 10px;
    font-family: myFont;
}

.select-items span:hover {
    color: rgba(42, 130, 228, 1);
    cursor: pointer;
}

.main {
    margin-top: 30px;
    height: 640px;
    /* border: 1px solid black; */
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
}

.aside {
    width: 250px;
    background-color: rgba(42, 130, 228, 1);
}

.content {
    width: 900px;
}

.title {
    height: 50px;
    background-color: rgba(250, 244, 240, 0.8);
    font-size: 30px;
    font-family: 'myFont';
    line-height: 50px;
    text-align: center;
}

.tabs {
    width: 240px;
    height: 50px;
    background-color: rgba(170, 205, 244, 1);
    color: rgba(255, 255, 255, 1);
}

.active {
    background-color: rgba(106, 155, 235, 1);
}

.tabs span {
    height: 50px;
    font-size: 30px;
    font-family: 'myFont';
    text-align: center;
    line-height: 50px;
    padding: 10px 30px;
    /* background-color: rgba(170, 205, 244, 1); */
}

.tabs span:hover {
    cursor: pointer;
}

.caseList {
    height: 600px;
    /* background-color: rgba(170, 205, 244, 1); */
    background-color: #f5f5f5;
    overflow: scroll;
    padding: 20px;
}

.typeItem {
    width: 60%;
    color: white;
    font-family: 'myFont';
    font-size: 25px;
    margin: 0 auto;
    text-align: center;
    padding: 30px 10px 40px;
    border-bottom: 2px white solid;
}

.typeItem:hover {
    scale: 1.2;
    cursor: pointer;
}

.isActive {
    color: rgb(166, 227, 42);
}

.caseItem {
    border-bottom: 1px solid #E4E7ED;
    background-color: white;
    padding: 20px 20px;
    margin-top: 20px;
}

.caseItem:hover {
    cursor: pointer;
    background-color: #F5F7FA
}

.case-title {
    font-size: 18px;
    color: #303133;
    line-height: 1.6;
}

.info {
    margin-top: 20px;
    font-size: 14px;
    color: #606266;
    /* width: 20%; */
    display: flex;
}


.line {
    font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
    color: rgba(0, 0, 0, .4);
    padding: 0;
    border: 0;
    vertical-align: middle;
    line-height: 1;
    margin: 0 15px;
    height: 12px;
    width: 1px;
    font-size: 0;
    background: #ebeef2;
    display: inline-block;
}
</style>